<template>
<div>
  <el-card class="login_box">
    <el-form  :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
      <el-form-item prop="mgName">
        <el-input prefix-icon="iconfont icon-yonghu" v-model="loginForm.mgName" placeholder="用户名/手机号"></el-input>
      </el-form-item>
      <el-form-item prop="mgPwd">
        <el-input type="password" prefix-icon="iconfont icon-suo" v-model="loginForm.mgPwd" placeholder="请输入密码"></el-input>
      </el-form-item >
      <el-form-item>
        <el-button style="background-color: #dd2726;color: #fff;width:260px;" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
    <div style="display:flex;  justify-content: flex-end;">
      <el-link type="info" style="padding-right:20px;" @click="toFindPwd">忘记密码?</el-link>
      <el-link type="info" @click="toRegistry">注册</el-link>
    </div>
  </el-card>
</div>
</template>

<script>
export default {
  name: 'subLogin',
  data () {
    return {
      loginForm: {
        mgName: '',
        mgPwd: '',
        mgMobile: ''
      },
      username: '',
      mobile: '',
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        mgName: [
          {required: true, message: '请输入登录名称', trigger: 'blur'}
        ],
        // 验证密码是否合法
        mgPwd: [
          {required: true, message: '请输入登录密码', trigger: 'blur'},
          {min: 6, max: 15, message: '长度在6到15个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    resetLoginForm () {
      // 点击重置按钮，重置表单
      this.$refs.loginFormRef.resetFields()
    },
    toRegistry () {
      this.$router.push('/registry')
    },
    toFindPwd () {
      this.$router.push('/findPwd')
    },
    login () {
      this.$refs.loginFormRef.validate(valid => {
        if (!valid) return
        this.loginForm.mgMobile = this.loginForm.mgName
        this.$axios
          .post('login', this.loginForm)
          .then(resp => {
            console.log(resp)
            console.log(resp.data.desc)
            if (resp.data.status !== 200) return this.$message.error('登录失败')
            this.$message.success('登录成功')
            this.username = resp.data.data.mgName
            this.mobile = resp.data.data.mgMobile
            console.log(this.username)
            localStorage.setItem('loginName', this.username)
            localStorage.setItem('loginMobile', this.mobile)
            console.log('test')
            this.$router.push({path: '/home'})
          })
          .catch(() => {
          })
      })
    }
  }
}
</script>

<style scoped>
.login_box{
  margin-top: 40px;
  margin-bottom: 40px;
  width:300px;
  height:350px;
  background-color:#fff;
  border-radius: 3px;
  margin-right:250px;
}
</style>
